<template>
    <van-nav-bar title="商品详情" left-text="返回" left-arrow   @click-left="onClickLeft"/>
    <!--图片信息-->
    <van-image
      width="100%"
      height="200"
      :src="productData.img.split(',')[0]"
      @click="showImg"
    />
    <van-row justify="space-between">
      <van-col span="12" class="title">
       {{productData.name}}
      </van-col>
      <van-col span="6" class="price">
        ￥ {{productData.price}}
      </van-col>
    </van-row>
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="配送地址:"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <div>
         <img src="../assets/sd.png" alt="" style="width:16px ;height: 16px;"><text style="color: pink;padding-right: 10px;">7天最低价</text>
        {{ productData.subname }}
    </div>
    <div class="brief">
        <div v-html="productData.brief"></div>
    </div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
    </van-action-bar>

</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useCascaderAreaData} from '@vant/area-data';
import { showImagePreview } from 'vant';
import { useRoute } from 'vue-router';
import { ProductApi } from '@/api';
const route=useRoute()
const productData = reactive({
    name: '',
    price: 0,
    brief: '',
    img: '',
    subname:''
    
})

const onClickLeft = () => history.back();


const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
const options = useCascaderAreaData();
const onFinish = ({ selectedOptions }) => {
    show.value = false;
    fieldValue.value = selectedOptions.map((option:any) => option.text).join('/');
};

const onClickIcon = () => { 
    console.log('点击图标');
    
};
const onClickButton = () => { 
    console.log('点击按钮');
    
};
const id=ref(0)

onMounted(() => { 
    id.value = route.query.categoryId == undefined ? 0 : Number(route.query.categoryId)
    console.log(id.value);
    CallProductApi()
})
let imgArray = ref([])
const CallProductApi = () => { 
    
    ProductApi.select.call({ id: id.value }).then((res: any) => { 
        console.log(res);
        let product = res[0]
        productData.name = product.name
        productData.img = product.img
        productData.brief = product.brief
        productData.subname = product.name
        productData.price=product.price

        imgArray.value=product.img.split(",")
    })
}

const showImg = () => {
    showImagePreview({
        images: imgArray.value,
        closeable: true,
        vertical: true
    });
}
 
</script>
<style scoped>

.title{
    font-weight: 700;
    padding-left: 3px;
}
.price{
    color: red;
    font-size: 23px;
    font-weight: 700;
}
</style>